<template>
  <view class="activity-cards">
    <view class="activity-card card" v-for="(activity, index) in (pageData.data || [])" :key="index" @click="goToDetail(activity)">
      <view class="card-title">{{ activity.title || '未命名活动' }}</view>
      <view class="card-subtitle">
        <view class="avatar">
          <svg width="30" height="30" viewBox="0 0 30 30">
            <circle cx="15" cy="15" r="14" :fill="activity.avatarColor || '#e6f7ff'" stroke="#ddd"/>
          </svg>
        </view>
        <text>{{ activity.author || '未知作者' }}</text>
        <text class="participants">{{ activity.participants || 0 }}人玩过</text>
        <text class="tag">#{{ activity.tag || '未分类' }}</text>
      </view>
      <view class="card-status">
        <view class="status-tag" :style="{ background: activity.statusColor || '#d9d9d9' }">{{ activity.status || '未知状态' }}</view>
        <text class="time">{{ activity.time || '时间待定' }}</text>
        <text class="location">{{ activity.location || '地点待定' }}</text>
      </view>
      <view class="card-images">
        <view class="card-image" v-for="i in 3" :key="i">
          <svg width="100%" height="160" viewBox="0 0 160 160">
            <rect width="160" height="160" :fill="activity.imageColors && activity.imageColors[i-1] ? activity.imageColors[i-1] : '#f0f0f0'"/>
            <text x="80" y="80" text-anchor="middle" dominant-baseline="middle" font-size="14">{{ activity.title ? activity.title.substring(0,4) : '' }}{{i}}</text>
          </svg>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { usePageData } from "/common/usePageData";

const searchObject = ref({
	catalog: null,
	page: 1,
	size: 10
})

const { pageData, status, searchList, search, loading, loadMore } = usePageData("topic_list", searchObject)


// 跳转到活动详情页面
const goToDetail = (activity) => {
  if (activity && activity.id) {
    uni.navigateTo({
      url: `/pages/activity/detail?id=${activity.id}`
    })
  } else {
    console.warn('活动数据无效，无法跳转到详情页面')
  }
}
</script>

<style scoped>
.activity-cards {
  padding: 20px 10px 0;
}

.card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 16px;
}

.activity-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.activity-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.activity-card:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.card-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.card-subtitle {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.avatar {
  margin-right: 10px;
  border-radius: 50%;
  overflow: hidden;
}

.participants {
  margin-left: 10px;
  font-size: 14px;
  color: #666;
}

.tag {
  margin-left: 10px;
  font-size: 14px;
  color: #3de6e6;
  font-weight: 500;
}

.card-status {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.status-tag {
  color: #fff;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  margin-right: 12px;
  font-weight: 500;
}

.time, .location {
  font-size: 14px;
  color: #666;
  margin-right: 15px;
}

.card-images {
  display: flex;
  gap: 10px;
}

.card-image {
  flex: 1;
  height: 160px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
}
</style>
